<template>
	<view class="order-confirm-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true">

			<!-- 门店和用户信息 -->
			<view class="info-card">
				<!-- 订单进度指示器 -->
				<view class="progress-section">
					<view class="progress-item">
						<view class="progress-circle">
							<image src="/static/images/wgh/矩形 4.png" class="progress-bg-image" mode="aspectFill"></image>
							<view class="progress-text">预约<br/>服务</view>
						</view>
					</view>
					<view class="progress-line"></view>
					<view class="progress-item">
						<view class="progress-circle">
							<image src="/static/images/wgh/矩形 4 拷贝.png" class="progress-bg-image" mode="aspectFill"></image>
							<view class="progress-text">支付<br/>订单</view>
						</view>
					</view>
					<view class="progress-line"></view>
					<view class="progress-item">
						<view class="progress-circle">
							<image src="/static/images/wgh/矩形 4 拷贝 2.png" class="progress-bg-image" mode="aspectFill"></image>
							<view class="progress-text">门店<br/>服务</view>
						</view>
					</view>
				</view>
				<view class="info-item">
					<uni-icons type="shop-filled" size="25" color="#3486FD"></uni-icons>
					<view class="info-content">
						<text class="info-title">{{ storeDetail.name }}</text>
						<text class="info-desc">{{ storeDetail.address }}</text>
					</view>
				</view>

				<view class="info-item user-info-item clickable" @click="openPhoneModal">
					<uni-icons type="person-filled" size="25" color="#3486FD"></uni-icons>
					<view class="info-content">
						<text class="info-title">张先生</text>
					</view>
					<text class="info-desc">18656894566</text>
				</view>

				<view class="info-item clickable" @click="openAppointmentModal">
					<uni-icons type="wallet" size="25" color="#3486FD"></uni-icons>
					<view class="info-content">
						<text class="info-title">立即预约</text>
					</view>
					<uni-icons type="arrowright" size="20" color="#3486FD"></uni-icons>
				</view>

				<view class="info-item clickable car-info-item" @click="selectCar">
					<image class="info_car_icon" src="/static/images/wgh/汽车.png" mode=""></image>
					<view class="info-content">
						<text class="info-title">{{ selectedCar.model }}/{{ selectedCar.plate }}</text>
					</view>
					<uni-icons type="arrowright" size="20" color="#3486FD"></uni-icons>
				</view>
				<!-- 服务产品 -->
				<view class="service-card">
					<view class="service-header">
						<text class="service-title">服务产品</text>
						<text class="service-count">共选择{{ selectedServices.length }}项服务产品</text>
					</view>

					<view class="service-list">
						<view class="service-item" v-for="serviceIndex in selectedServices" :key="serviceIndex">
							<text class="service-name">{{ services[serviceIndex].name }}</text>
							<text class="service-price">¥{{ services[serviceIndex].price }}</text>
						</view>
					</view>
				</view>

				<!-- 优惠券 -->
				<view class="coupon-card">
					<view class="coupon-item clickable" @click="selectCoupon">
						<view class="coupon-content">
							<text class="coupon-title">代金券/优惠券</text>
						</view>
						<view class="coupon-discount">
							<text class="discount-text" v-if="selectedCoupon && isCouponUsable">-{{ selectedCoupon.amount }}元</text>
							<text class="coupon-unusable" v-if="selectedCoupon && !isCouponUsable">当前消费不足</text>
							<uni-icons type="arrowright" size="16" color="#3486FD"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-actions">
				<view class="contact-service" @click="contactService">
					<image src="/static/images/wgh/客服.png" class="service-icon"></image>
					<text class="service-text">联系客服</text>
				</view>
				<view class="total-price">
					<text class="total-text">合计:¥{{ totalPrice }}</text>
				</view>
				<button class="submit-btn" @click="submitOrder">
					<text class="btn-text">提交订单</text>
				</button>
			</view>

			<!-- 预约时间选择器弹出框 -->
			<view class="appointment-modal" v-if="showAppointmentModal" @click="hideAppointmentModal">
				<view class="modal-content" @click.stop>
					<view class="modal-header">
						<text class="modal-title">预约时间</text>
						<text class="current-time">{{ currentDateTime }}</text>
					</view>

					<view class="modal-body">
						<!-- 双列滑动选择器 -->
						<picker-view class="picker-view" :value="multiIndex" @change="onPickerViewChange">
							<picker-view-column>
								<view class="picker-item" v-for="(item, index) in multiArray[0]" :key="index">
									{{ item }}
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(item, index) in multiArray[1]" :key="index">
									{{ item }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>

					<view class="modal-footer">
						<button class="cancel-btn" @click="hideAppointmentModal">取消</button>
						<button class="confirm-btn" @click="confirmAppointment">确定</button>
					</view>
				</view>
			</view>

			<!-- 电话号码选择弹出框 -->
			<view class="phone-modal" v-if="showPhoneModal" @click="hidePhoneModal">
				<view class="phone-modal-content" @click.stop>
					<view class="phone-number">{{ phoneNumber }}</view>
					<view class="phone-action-item" @click="copyPhoneNumber">复制</view>
					<view class="phone-action-item" @click="hidePhoneModal">取消拨号</view>
				</view>
			</view>

			<!-- 支付密码输入弹出框 -->
			<view class="payment-modal" v-if="showPaymentModal" @click="hidePaymentModal">
				<view class="payment-modal-content" @click.stop>
					<view class="payment-header">
						<image class="close-icon" src="/static/错.png" @click="hidePaymentModal"></image>
						<text class="payment-title">请输入支付密码</text>
					</view>
					<view class="payment-body">
						<text class="platform-name">车辆服务平台</text>
						<text class="payment-amount">¥ {{ totalPrice }}</text>
						<view class="payment-method">
							<text class="method-label">支付方式</text>
							<view class="method-content">
								<text class="method-name">零钱</text>
								<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
							</view>
						</view>
						<view class="password-input">
							<view class="password-dot" v-for="(item, index) in passwordDots" :key="index" @click="focusPasswordInput">
								<text v-if="item">{{ item }}</text>
							</view>
						</view>
						<!-- 隐藏的输入框 -->
						<input 
							class="hidden-input" 
							type="text" 
							:value="passwordValue" 
							@input="onPasswordInput" 
							@focus="onPasswordFocus"
							@blur="onPasswordBlur"
							@keydown="onPasswordKeydown"
							:focus="inputFocus"
							maxlength="6"
						/>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				storeDetail: {
					name: '',
					address: '',
					phoneNumber: ''
				},
				selectedCar: {
					model: '奔驰-GR',
					plate: '豫A00001'
				},
				selectedCoupon: null, // 选中的优惠券
				selectedServices: [],
				services: [],
				totalPrice: 0,
				isCouponUsable: false, // 优惠券是否可用
				// 预约时间相关
				showAppointmentModal: false,
				currentDateTime: '', // 当前时间显示
				multiArray: [
					[],
					[]
				], // 多列选择器数据 [日期数组, 时间数组]
				multiIndex: [1, 1], // 多列选择器当前选中的索引
				// 电话号码弹窗相关
				showPhoneModal: false,
				phoneNumber: '18642589456',
				// 支付密码弹窗相关
				showPaymentModal: false,
				passwordDots: ['', '', '', '', '', ''],
				passwordValue: '',
				inputFocus: false
			}
		},
		onLoad() {
			this.loadOrderData();
			this.initAppointmentData();
		},
		onShow() {
			// 页面显示时重新加载车辆数据
			const carData = uni.getStorageSync('selectedCar');
			if (carData) {
				this.selectedCar = carData;
			}

			// 页面显示时重新加载优惠券数据
			const couponData = uni.getStorageSync('selectedCoupon');
			if (couponData) {
				this.selectedCoupon = couponData;
				this.calculateTotalPrice();
			} else {
				this.selectedCoupon = null;
				this.calculateTotalPrice();
			}
		},
		methods: {
			loadOrderData() {
				try {
					// 获取门店详情
					const storeData = uni.getStorageSync('selectedStoreDetail');
					if (storeData) {
						this.storeDetail = storeData;
					}

					// 获取选中的服务
					const servicesData = uni.getStorageSync('selectedServicesData');
					if (servicesData) {
						this.selectedServices = servicesData.selectedServices || [];
						this.services = servicesData.services || [];
						this.calculateTotalPrice();

					}
				} catch (e) {
					console.log('加载订单数据失败:', e);
				}
			},
			calculateTotalPrice() {
				let total = 0;
				this.selectedServices.forEach(index => {
					total += parseFloat(this.services[index].price);
				});
				
				// 计算优惠券抵扣
				let discountAmount = 0;
				if (this.selectedCoupon) {
					// 检查是否满足优惠券使用条件
					if (total >= this.selectedCoupon.minAmount) {
						discountAmount = this.selectedCoupon.amount;
						this.isCouponUsable = true;
					} else {
						this.isCouponUsable = false;
					}
				} else {
					this.isCouponUsable = false;
				}
				this.totalPrice = (total - discountAmount).toFixed(1);
			},

			// 显示预约弹窗
			openAppointmentModal() {
				this.showAppointmentModal = true;
			},

			// 隐藏预约弹窗
			hideAppointmentModal() {
				this.showAppointmentModal = false;
			},
			selectCar() {
				uni.navigateTo({
					url: '/pages/carMaintenance/selectCar/selectCar'
				});
			},
			selectCoupon() {
				uni.navigateTo({
					url: '/pages/carMaintenance/selectCoupon/selectCoupon'
				});
			},
			contactService() {
				uni.showToast({
					title: '联系客服',
					icon: 'none'
				});
			},
			submitOrder() {
				// 显示支付密码输入弹窗
				this.openPaymentModal();
			},

			// 初始化预约数据
			initAppointmentData() {
				const now = new Date();

				// 生成日期数组（明天、后天）
				const dateArray = [];
				for (let i = 1; i <= 2; i++) {
					const date = new Date(now);
					date.setDate(now.getDate() + i);
					let label = '';
					if (i === 1) {
						label = `${date.getMonth() + 1}月${date.getDate()}日 (明天)`;
					} else if (i === 2) {
						label = `${date.getMonth() + 1}月${date.getDate()}日 (后天)`;
					}

					dateArray.push(label);
				}

				// 生成时间数组（上午8-12点，下午2-6点）
				const timeArray = [
					'08:00', '09:00', '10:00', '11:00', // 上午
					'14:00', '15:00', '16:00', '17:00' // 下午
				];

				// 设置多列选择器数据
				this.multiArray = [dateArray, timeArray];

				// 设置默认选中（明天上午9点）
				this.multiIndex = [0, 1];

				// 更新显示
				this.updateCurrentDateTime();
			},

			// picker-view变化事件
			onPickerViewChange(e) {
				this.multiIndex = e.detail.value;
				this.updateCurrentDateTime();
			},

			// 更新当前选中的时间显示
			updateCurrentDateTime() {
				if (this.multiArray[0] && this.multiArray[1] &&
					this.multiArray[0].length > 0 && this.multiArray[1].length > 0 &&
					this.multiIndex[0] >= 0 && this.multiIndex[1] >= 0 &&
					this.multiIndex[0] < this.multiArray[0].length &&
					this.multiIndex[1] < this.multiArray[1].length) {
					const selectedDate = this.multiArray[0][this.multiIndex[0]];
					const selectedTime = this.multiArray[1][this.multiIndex[1]];
					if (selectedDate && selectedTime) {
						this.currentDateTime = `${selectedDate} ${selectedTime}`;
					}
				}
			},

			// 确认预约
			confirmAppointment() {
				if (this.multiArray[0] && this.multiArray[1] &&
					this.multiArray[0].length > 0 && this.multiArray[1].length > 0 &&
					this.multiIndex[0] >= 0 && this.multiIndex[1] >= 0 &&
					this.multiIndex[0] < this.multiArray[0].length &&
					this.multiIndex[1] < this.multiArray[1].length) {
					const selectedDate = this.multiArray[0][this.multiIndex[0]];
					const selectedTime = this.multiArray[1][this.multiIndex[1]];
					if (selectedDate && selectedTime) {
						// 存储预约时间到本地存储
						const appointmentTime = `${selectedDate} ${selectedTime}`;
						uni.setStorageSync('selectedAppointmentTime', appointmentTime);
						
						uni.showToast({
							title: `预约成功：${selectedDate} ${selectedTime}`,
							icon: 'none'
						});
						this.hideAppointmentModal();
					}
				}
			},

			// 显示电话号码弹窗
			openPhoneModal() {
				this.showPhoneModal = true;
			},

			// 隐藏电话号码弹窗
			hidePhoneModal() {
				this.showPhoneModal = false;
			},

			// 复制电话号码
			copyPhoneNumber() {
				uni.setClipboardData({
					data: this.phoneNumber,
					success: () => {
						uni.showToast({
							title: '电话号码已复制',
							icon: 'none'
						});
						this.hidePhoneModal();
					},
				});
			},

			// 显示支付密码弹窗
			openPaymentModal() {
				this.showPaymentModal = true;
			},

			// 隐藏支付密码弹窗
			hidePaymentModal() {
				this.showPaymentModal = false;
				// 重置密码输入
				this.passwordValue = '';
				this.updatePasswordDots();
				this.inputFocus = false;
			},

			// 点击密码框获取焦点
			focusPasswordInput() {
				this.inputFocus = true;
			},

			// 密码输入事件
			onPasswordInput(e) {
				const value = e.detail.value;
				this.passwordValue = value;
				this.updatePasswordDots();

				// 如果输入了6位密码，自动提交
				if (value.length === 6) {
					this.submitPayment();
				}
			},

			// 处理键盘事件
			onPasswordKeydown(e) {
				// 处理退格键删除
				if (e.keyCode === 8) { // 退格键
					if (this.passwordValue.length > 0) {
						this.passwordValue = this.passwordValue.slice(0, -1);
						this.updatePasswordDots();
					}
				}
			},

			// 更新密码点显示
			updatePasswordDots() {
				this.passwordDots = ['', '', '', '', '', ''];
				for (let i = 0; i < this.passwordValue.length && i < 6; i++) {
					this.passwordDots[i] = '●';
				}
			},

			// 输入框获得焦点
			onPasswordFocus() {
				this.inputFocus = true;
			},

			// 输入框失去焦点
			onPasswordBlur() {
				this.inputFocus = false;
			},


			// 提交支付
			submitPayment() {
				// 验证支付密码（这里设置一个简单的验证逻辑）
				const correctPassword = '123456'; // 正确的支付密码
				
				if (this.passwordValue === correctPassword) {
					// 密码正确
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.hidePaymentModal();
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/carMaintenance/paySuccess/paySuccess?totalPrice=${this.totalPrice}&orderNumber=${this.orderNumber}`
						});
					}, 1500);
				} else {
					// 密码错误
					uni.showToast({
						title: '支付密码错误',
						icon: 'none'
					});
					// 清空密码输入
					this.passwordValue = '';
					this.updatePasswordDots();
				}
			}
		}
	}
</script>

<style scoped>
	.order-confirm-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #3486FD 100rpx, #0A64E7 350rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: 100%;
		box-sizing: border-box;
	}

	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	.progress-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.progress-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.progress-circle {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 1.2;
		padding: 8rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}
	
	.progress-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		z-index: 1;
	}
	
	.progress-text {
		position: relative;
		z-index: 2;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		text-align: center;
		line-height: 1.2;
	}


	.progress-line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
		margin: 0 15rpx;
	}

	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.user-info-item {
		justify-content: space-between;
	}

	.user-info-item .info-content {
		flex: none;
	}

	.user-info-item .info-desc {
		margin-left: auto;
	}


	.info_car_icon {
		height: 30rpx;
		width: 40rpx;
	}

	.info-content {
		margin-left: 20rpx;
		flex: 1;
	}


	.info-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 8rpx;
	}

	.info-desc {
		font-size: 28rpx;
		color: #666;
		display: block;
	}

	.service-card {
		background-color: #fff;
		margin-top: 30rpx;
	}

	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.service-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.service-count {
		font-size: 28rpx;
		color: #666;
	}

	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}


	.service-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.service-price {
		font-size: 32rpx;
		color: #FF7438;
		margin-right: 150rpx;
	}

	.coupon-card {
		margin-top: 30rpx;
		background-color: #fff;
		border-top: 2rpx solid #f0f0f0;
	}

	.coupon-item {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.coupon-content {
		flex: 1;
	}

	.coupon-discount {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.discount-text {
		font-size: 28rpx;
		color: #FF7438;
		font-weight: 500;
	}

	.coupon-unusable {
		font-size: 28rpx;
		color: #999;
		font-weight: 500;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.contact-service {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 30rpx;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.service-text {
		font-size: 24rpx;
		color: #666;
	}

	.total-price {
		flex: 1;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 140rpx;
	}

	.total-text {
		font-size: 32rpx;
		color: #FF7438;
	}

	.submit-btn {
		background: linear-gradient(135deg, #2b79f5 0%, #1e5bb8 100%);
		color: #fff;
		border-radius: 80rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
	}

	.btn-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}

	.appointment-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 16rpx;
		width: 600rpx;
		max-width: 90%;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	}

	.modal-header {
		padding: 40rpx 40rpx 20rpx 40rpx;
		text-align: center;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.current-time {
		font-size: 28rpx;
		color: #999;
		display: block;
	}

	.modal-body {
		padding: 30rpx 40rpx;
	}

	.picker-view {
		height: 400rpx;
		width: 100%;
	}

	.picker-view-column {
		border: none;
		outline: none;
	}

	.picker-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333;
	}

	.modal-footer {
		display: flex;
		border-top: 2rpx solid #f0f0f0;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 100rpx;
		border: none;
		background-color: transparent;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		color: #666;
		border-right: 2rpx solid #f0f0f0;
	}

	.confirm-btn {
		color: #3486FD;
		font-weight: bold;
	}

	.phone-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 9999;
	}

	.phone-modal-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.2);
	}

	.phone-number {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding: 40rpx 30rpx;
		font-weight: 500;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.phone-action-item {
		height: 88rpx;
		color: #333;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.phone-action-item:last-child {
		border-bottom: none;
	}


	.payment-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.payment-modal-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		max-width: 90%;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
		position: relative;
	}

	.payment-header {
		position: relative;
		padding: 30rpx 40rpx 20rpx 40rpx;
		text-align: center;
	}

	.close-icon {
		position: absolute;
		margin-top: 20rpx;
		left: 30rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.payment-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.payment-body {
		padding: 40rpx;
		text-align: center;
	}

	.platform-name {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 20rpx;
	}

	.payment-amount {
		font-size: 60rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 40rpx;
	}

	.payment-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 40rpx;
		border-top: 2rpx solid #f0f0f0;
	}

	.method-label {
		font-size: 28rpx;
		color: #333;
	}

	.method-content {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.method-name {
		font-size: 28rpx;
		color: #333;
	}

	.password-input {
		display: flex;
		justify-content: center;
		gap: 20rpx;
	}

	.password-dot {
		width: 80rpx;
		height: 80rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.hidden-input {
		position: absolute;
		left: -9999rpx;
		opacity: 0;
		width: 1rpx;
		height: 1rpx;
	}

</style>